﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="TweetSayings.OAuthLogin" CodeBehind="OAuthLogin.aspx.cs"
    Async="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        body
        {
            background: #C0DEED url('http://a3.twimg.com/a/1258420634/images/bg-clouds.png') repeat-x;
        }
        
        .boxlite
        {
            width: 303px;
            height: 22px;
            padding: 1px;
            background: #fff;
            margin: 0px 3px 0px 0px;
            font-size: 12px;
            font-family: arial, sans-serif;
            position: relative;
        }
        
        .boxlite div.blip
        {
            position: absolute;
            top: 2px;
            background: #AFBFCD;
            height: 20px;
            width: 25px;
            display: block;
            float: left;
        }
        
        .boxlite div.blah
        {
            background: #4499DD;
            color: #fff;
            font-weight: bold;
            padding: 2px 1px 0px 5px;
            margin: 2px 3px 0px 2px;
            height: 16px;
        }
    </style>
    <!--[if IE]>
	<style>
	.boxlite { 	height: 26px;	 }
	.boxlite div.blah { 	padding: 3px 1px 2px 5px; }
	</style>
<![endif]-->
    <script type="text/javascript" lang="javascript">
        function dojazz() {
            setTimeout("beginInflate('inner1');", 500);
            setTimeout("beginInflate('inner2');", 1000);
            setTimeout("beginInflate('inner3');", 1500);
            setTimeout("beginInflate('inner4');", 2000);
            setTimeout("beginInflate('inner5');", 2500);
            setTimeout("beginInflate('inner6');", 3000);
            setTimeout("beginInflate('inner7');", 3500);
            setTimeout("beginInflate('inner8');", 4000);
            setTimeout("beginInflate('inner9');", 4500);
            setTimeout("beginInflate('innerA');", 5000);
            setTimeout("beginInflate('innerB');", 5500);
            setTimeout("beginInflate('innerC');", 6000);

            setTimeout("setDisplay('inner1','none');", 7000);
            setTimeout("setDisplay('inner2','none');", 7000);
            setTimeout("setDisplay('inner3','none');", 7000);
            setTimeout("setDisplay('inner4','none');", 7000);
            setTimeout("setDisplay('inner5','none');", 7000);
            setTimeout("setDisplay('inner6','none');", 7000);
            setTimeout("setDisplay('inner7','none');", 7000);
            setTimeout("setDisplay('inner8','none');", 7000);
            setTimeout("setDisplay('inner9','none');", 7000);
            setTimeout("setDisplay('innerA','none');", 7000);
            setTimeout("setDisplay('innerB','none');", 7000);
            setTimeout("setDisplay('innerC','none');", 7000);

            setTimeout("setDisplay('delay','');", 7000);
        }

        function beginInflate(controlName) {
            setTimeout("inflate('" + controlName + "', 0, 24, '#A6BBCC')", 100);
            setTimeout("inflate('" + controlName + "', 1, 22, '#9BB6CB')", 200);
            setTimeout("inflate('" + controlName + "', 1, 22, '#8EB1CB')", 250);
            setTimeout("inflate('" + controlName + "', 2, 20, '#80ABCD')", 300);
            setTimeout("inflate('" + controlName + "', 2, 20, '#70A5D0')", 350);
            setTimeout("inflate('" + controlName + "', 3, 18, '#5C9FD5')", 400);
        }

        function inflate(controlName, top, height, color) {
            var control = document.getElementById(controlName);
            control.style.top = top + "px";
            control.style.height = height + "px";
            control.style.background = color;
        }

        function setDisplay(controlName, disp) {
            var control = document.getElementById(controlName);
            control.style.display = disp;
        }
    </script>
</head>
<body onload="javascript:dojazz();">
    <form id="form" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <center>
        <table cellpadding="0" cellspacing="0" border="0" width="750" style="text-align: left;
            margin-top: 30px;">
            <tr>
                <td valign="middle">
                    <div style="width: 100%; height: 100%; background: url(http://blog.TweetSayingsLibrary.com/twipler/siteimages/white-alpha-thick.png);
                        padding: 10px; font-family: verdana, arial, sans-serif;">
                        <div style="background: #fff; padding: 15px 10px 20px 10px;">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                <tr>
                                    <td align="center" valign="middle">
                                        <img src="http://a3.twimg.com/client_application_images/19227/twipler-small.jpg" />
                                    </td>
                                    <td align="left" valign="middle">
                                        <h2 style="color: #247; margin-top: 10px; margin-bottom: 5px;">
                                            Authenticating....</h2>
                                        <p style="color: #49d; font-size: 12px; margin: 4px;">
                                            Mixing potions, fluffing pillows and baking you a cake.</p>
                                        <div class="boxlite">
                                            <div id="inner1" class="blip" style="left: 2px;">
                                                &nbsp;</div>
                                            <div id="inner2" class="blip" style="left: 27px;">
                                                &nbsp;</div>
                                            <div id="inner3" class="blip" style="left: 52px;">
                                                &nbsp;</div>
                                            <div id="inner4" class="blip" style="left: 77px;">
                                                &nbsp;</div>
                                            <div id="inner5" class="blip" style="left: 102px;">
                                                &nbsp;</div>
                                            <div id="inner6" class="blip" style="left: 127px;">
                                                &nbsp;</div>
                                            <div id="inner7" class="blip" style="left: 152px;">
                                                &nbsp;</div>
                                            <div id="inner8" class="blip" style="left: 177px;">
                                                &nbsp;</div>
                                            <div id="inner9" class="blip" style="left: 202px;">
                                                &nbsp;</div>
                                            <div id="innerA" class="blip" style="left: 227px;">
                                                &nbsp;</div>
                                            <div id="innerB" class="blip" style="left: 252px;">
                                                &nbsp;</div>
                                            <div id="innerC" class="blip" style="left: 277px;">
                                                &nbsp;</div>
                                            <div id="delay" class="blah" style="display: none;">
                                                Taking longer than expected, please wait...</div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </center>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        </ContentTemplate>
        <Triggers>            
            <asp:AsyncPostBackTrigger ControlID="tickNow" />
        </Triggers>
    </asp:UpdatePanel>    
    <asp:Timer ID="tickNow" runat="server" Interval="50" OnTick="tickNow_Update" />
    </form>
</body>
</html>
